<template>
  <div ref="monthpicker" class="month-picker">
    <div class="picker_box">
      <div :class="['year-inputbox']">
        <input
          v-model="currentYear"
          class="year-picker-input"
          readonly="readonly"
          @focus="showPopup('year')"
        />
        <div
          :class="[
            'picker-icon',
            visible && pickerMode === 'year' && 'year-icon-down',
          ]"
          @click="showPopup('year')"
        ></div>
      </div>
      <div :class="['month-inputbox']">
        <input
          v-model="currentMonth"
          class="month-picker-input"
          readonly="readonly"
          @focus="showPopup('month')"
        />
        <div
          :class="[
            'picker-icon',
            visible && pickerMode === 'month' && 'month-icon-down',
          ]"
          @click="showPopup('month')"
        ></div>
      </div>
    </div>

    <div v-if="visible" class="month-picker-popover">
      <div>
        <PickerMonths
          v-if="pickerMode === 'month'"
          :format-date="pickerTime"
          @picker-change="onPickerChange"
        ></PickerMonths>
        <PickerYears
          v-else-if="pickerMode === 'year'"
          :format-date="pickerTime"
          @picker-change="onPickerChange"
        ></PickerYears>
      </div>
    </div>
  </div>
</template>

<script name="MonthPicker" setup>
import { onClickOutside } from '@vueuse/core'
import { creatDate, getYearMonthDay } from '../datepicker/date.js'
// import PickerDays from './PickerDays.vue'
import PickerMonths from './PickerMonths.vue'
import PickerYears from './PickerYears.vue'
import { ItMessage } from '@/components'

import { ref, computed, watch } from 'vue'

const props = defineProps({
  defaultTime: {
    type: String,
    default: '',
  },
})
let pickerTime = ref(null)

const currentDate = new Date()
const currentYear = ref(currentDate.getFullYear() + ' 年度'),
  currentMonth = ref(currentDate.getMonth() + 1 + ' 月份')
// 初次进入无法修改初始时间  修改为监听
watch(
  () => props.defaultTime,
  () => {
    const [year, month] = getYearMonthDay(props.defaultTime)
    currentYear.value = year + ' 年度'
    currentMonth.value = month + 1 + ' 月份'
    pickerTime.value = creatDate(props.defaultTime)
  },
  { immediate: true }
)

let visible = ref(false),
  pickerMode = ref('')

const showPopup = (mode) => {
  pickerMode.value = mode
  visible.value = true
}
const emits = defineEmits(['change'])
const onPickerChange = (e) => {
  const [year, month, day] = getYearMonthDay(e.value)
  if (pickerMode.value === 'year') {
    currentYear.value = year + ' 年度'
    const month_1 = currentMonth.value.split(' ')[0]
    const timestamp2 = `${year}-${month_1}`
    pickerTime.value = new Date(timestamp2)
  } else if (pickerMode.value === 'month') {
    currentMonth.value = month + 1 + ' 月份'
    const year_1 = currentYear.value.split(' ')[0]
    const timestamp2 = `${year_1}-${month + 1}`
    pickerTime.value = new Date(timestamp2)
  }

  returnChange()
}

const returnChange = () => {
  let yearVal = currentYear.value,
    monthVal = currentMonth.value
  let format = 'YYYY-MM'
  let parseVal = [yearVal.split(' ')[0], monthVal.split(' ')[0]]
  let parseMonth = parseVal[1] < 10 ? `0${parseVal[1]}` : parseVal[1]
  format = format.replace('YYYY', parseVal[0])
  format = format.replace('MM', parseMonth)
  visible.value = false
  emits('change', format)
}

const monthpicker = ref(null)
onClickOutside(monthpicker, () => {
  closePopup()
})
const closePopup = () => {
  if (visible.value) {
    visible.value = false
  }
}
</script>

<style scoped>
@import url('./month-picker.css');
</style>
